<template>
  <div class="activity-time-setting">
    <el-form label-width="auto" size="medium">
      <el-form-item label="活动类型">
        <span>{{goods.activityTypeName}}</span>
      </el-form-item>
      <el-form-item label="开始时间">
        <sys-date-time-picker v-model="startTime" class="setting-input" type="hour"></sys-date-time-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <sys-date-time-picker v-model="endTime" class="setting-input" type="hour"></sys-date-time-picker>
      </el-form-item>
    </el-form>
    <div style="text-align:center">
      <el-button size="medium" type="primary" @click="ensure">确定</el-button>
    </div>
  </div>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';

  import SysDateTimePicker from 'commonComponents/sysDateTimePicker';

  export default {
    props: {
      goods: {
        type: Object,
        required: true
      }
    },

    data() {
      let goods = this.goods;
      return {
        startTime: goods.activityStartTime,
        endTime: goods.activityEndTime
      };
    },

    methods: {
      ensure() {
        let msg = this.checkValid();
        if (msg !== '') {
          this.$message(msg);
          return;
        }
        this.$emit('to-approval', this.goods, {
          startTime: this.$moment(this.startTime).format('YYYY-MM-DD HH:mm:ss'),
          endTime: this.$moment(this.endTime).format('YYYY-MM-DD HH:mm:ss')
        });
      },

      checkValid() {
        let startTime = this.startTime;
        if (SystemUtil.isEmpty(startTime)) {
          return '活动开始时间';
        }

        let endTime = this.endTime;
        if (SystemUtil.isEmpty(endTime)) {
          return '活动开始时间';
        }

        if (this.$moment(startTime).isAfter(endTime, 'second')) {
          return '活动开始时间不能晚于活动结束时间';
        }
        return '';
      }
    },

    components:{
      SysDateTimePicker
    }
  };

</script>

<style lang="scss" scoped>
  .activity-time-setting {
    padding: 0 10px;

    .el-form-item {
      margin-bottom: 10px;
    }

    .setting-input {
      width: 100%;
    }
  }

</style>
